<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="id ? '修改提货点' : '添加提货点'"
    :visible.sync="dialogFormVisible"
    width="750px"
    @close="cancel"
  >
    <template v-if="dialogFormVisible">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        @submit.native.prevent
        v-loading="loading"
      >
        <el-form-item label="提货点名称：" prop="name">
          <el-input
            v-model="ruleForm.name"
            maxlength="40"
            placeholder="请输入提货点名称"
            class="dialogWidth"
          ></el-input>
        </el-form-item>
        <el-form-item label="提货点简介：">
          <el-input
            v-model="ruleForm.introduction"
            maxlength="100"
            placeholder="请输入提货点简介"
            class="dialogWidth"
          ></el-input>
        </el-form-item>
        <el-form-item label="提货点手机号：" prop="phone">
          <el-input v-model="ruleForm.phone" placeholder="请输入提货点手机号" class="dialogWidth"></el-input>
        </el-form-item>
        <el-form-item label="提货点地址：" prop="address">
          <el-cascader
            class="dialogWidth"
            style="width: 100%"
            clearable
            v-model="ruleForm.address"
            :options="addresData"
            :props="{ value: 'name', label: 'name', children: 'child', expandTrigger: 'hover' }"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址：" prop="detailedAddress">
          <el-input v-model="ruleForm.detailedAddress" placeholder="请输入详细地址" class="dialogWidth"></el-input>
        </el-form-item>
        <el-form-item label="提货点营业：">
          <el-time-picker
            is-range
            v-model="dayTime"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="请选择时间营业时间"
            value-format="HH:mm:ss"
            @change="onchangeTime"
          >
          </el-time-picker>
        </el-form-item>
        <!-- prop="image"-->
        <el-form-item label="提货点logo：" :required="true">
          <div class="upLoadPicBox" @click="modalPicTap('1')">
            <div class="pictrue" v-if="ruleForm.image"><img :src="ruleForm.image" /></div>
            <div v-else class="upLoad">
              <i class="el-icon-camera cameraIconfont" />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="经纬度：" prop="latitude">
          <el-tooltip content="请点击查找位置选择位置">
            <el-input v-model="ruleForm.latitude" placeholder="请查找位置" class="dialogWidth" readOnly>
              <el-button class="searchBtn" slot="append" @click="onSearch">查找位置</el-button>
            </el-input>
          </el-tooltip>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="editForm('ruleForm')" v-if="id" v-hasPermi="['admin:system:store:update']"
          >修改</el-button
        >
        <el-button type="primary" @click="submitForm('ruleForm')" v-else v-hasPermi="['admin:system:store:save']"
          >提交</el-button
        >
      </div>
      <el-dialog
        v-model="modalMap"
        title="上传经纬度"
        :visible.sync="modalMap"
        append-to-body
        class="mapBox"
        width="500px"
      >
        <iframe id="mapPage" width="100%" height="100%" frameborder="0" v-bind:src="keyUrl"></iframe>
      </el-dialog>
    </template>
  </el-dialog>
</template>

<script>
import { storeSaveApi, storeInfoApi, storeUpdateApi } from '@/api/storePoint';
import * as logistics from '@/api/logistics';
import { configInfo } from '@/api/systemConfig';
import Templates from '../../../../appSetting/wxAccount/wxTemplate/index';
import { Debounce } from '@/utils/validate';
import { getTxMapKeyApi } from '@/api/systemConfig';
export default {
  name: 'index',
  components: { Templates },
  // props: {
  //   children: 'child',
  //   label: 'name',
  //   value: 'name'
  // },
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请填写手机号'));
      } else if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error('手机号格式不正确!'));
      } else {
        callback();
      }
    };
    const validateUpload = (rule, value, callback) => {
      if (!this.ruleForm.image) {
        callback(new Error('请上传提货点logo'));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      dialogFormVisible: false,
      modalMap: false,
      keyUrl: '',
      addresData: [],
      ruleForm: {
        name: '',
        introduction: '',
        phone: '',
        address: '',
        detailedAddress: '',
        dayTime: '',
        image: '',
        latitude: '',
      },
      id: 0,
      dayTime: ['', ''],
      rules: {
        name: [{ required: true, message: '请输入提货点名称', trigger: 'blur' }],
        address: [{ required: true, message: '请选择提货点地址', trigger: 'change' }],
        dayTime: [{ required: true, type: 'array', message: '请选择提货点营业时间', trigger: 'change' }],
        phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
        detailedAddress: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
        image: [{ required: true, validator: validateUpload, trigger: 'change' }],
        latitude: [{ required: true, message: '请选择经纬度', trigger: 'blur' }],
      },
    };
  },
  created() {
    this.ruleForm.image = '';
    let cityList = JSON.parse(sessionStorage.getItem('cityList'));
    this.addresData = cityList;
    this.getCityList();
    this.getKey();
  },
  mounted() {
    window.addEventListener(
      'message',
      function (event) {
        // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
        var loc = event.data;
        if (loc && loc.module === 'locationPicker') {
          // 防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
          window.parent.selectAdderss(loc);
        }
      },
      false,
    );
    window.selectAdderss = this.selectAdderss;
  },
  methods: {
    //详情
    getInfo(id) {
      let that = this;
      that.id = id;
      this.loading = true;
      storeInfoApi({ id: id }).then((res) => {
        that.ruleForm = res;
        that.ruleForm.address = res.address.split(',');
        that.dayTime = res.dayTime.split(',');
        this.loading = false;
      });
    },
    //取消
    cancel() {
      this.dialogFormVisible = false;
      this.clearFrom();
      this.ruleForm.image = '';
      this.resetForm('ruleForm');
      this.id = 0;
    },
    //重置
    resetForm(name) {
      this.$refs[name].resetFields();
    },
    // 提交
    submitForm: Debounce(function (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          storeSaveApi(this.ruleForm).then(async () => {
            this.$message.success('提交成功');
            this.dialogFormVisible = false;
            this.$parent.tableList();
            this.$parent.storeGetCount();
            this.clearFrom();
            this.resetForm(name);
            this.id = 0;
          });
        } else {
          return false;
        }
      });
    }),
    //编辑
    editForm: Debounce(function (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.handleChange(this.ruleForm.address);
          storeUpdateApi(this.ruleForm, this.id).then(async () => {
            this.$message.success('编辑成功');
            this.dialogFormVisible = false;
            this.$parent.tableList();
            this.clearFrom();
            this.resetForm(name);
            this.id = 0;
          });
        } else {
          return false;
        }
      });
    }),
    //数据归为初始状态
    clearFrom() {
      this.ruleForm.introduction = '';
      this.dayTime = ['', ''];
    },
    //确认省市区
    handleChange(e) {
      let province = e[0];
      let city = e[1];
      let area = e[2];
      if (e.length === 2) {
        this.ruleForm.address = province + ',' + city;
      } else if (e.length === 3) {
        this.ruleForm.address = province + ',' + city + ',' + area;
      }
    },
    //营业时间
    onchangeTime(e) {
      this.ruleForm.dayTime = e ? e.join(',') : '';
    },
    //上传图片
    modalPicTap(tit) {
      const _this = this;
      this.$modalUpload(
        function (img) {
          _this.ruleForm.image = img[0].sattDir;
        },
        tit,
        'system',
      );
    },
    //查找位置
    onSearch() {
      this.modalMap = true;
    },
    // 选择经纬度
    selectAdderss(data) {
      this.ruleForm.latitude = data.latlng.lng + ',' + data.latlng.lat;
      this.modalMap = false;
    },
    // key值
    getKey() {
      getTxMapKeyApi().then(async (res) => {
        let keys = res.value;
        this.keyUrl = `https://apis.map.qq.com/tools/locpicker?type=1&key=${keys}&referer=myapp`;
      });
    },
    getCityList() {
      logistics
        .cityListTree()
        .then((res) => {
          sessionStorage.setItem('cityList', JSON.stringify(res));
          let cityList = JSON.parse(sessionStorage.getItem('cityList'));
          this.addresData = cityList;
        })
        .catch((res) => {
          this.$message.error(res.message);
        });
    },
  },
};
</script>

<style lang="scss">
.el-input-group__append,
.el-input-group__prepend {
  background-color: #1890ff !important;
  color: #fff !important;
  border-color: #1890ff !important;
  border-radius: 0 4px 4px 0;
}

.cascaderW {
  width: 350px;
}

.mapBox .el-dialog__body {
  height: 640px !important;
}
.searchBtn {
  background-color: var(--prev-color-primary) !important;
}
</style>
